import React, {useState, useEffect, useRef} from 'react'
import * as echarts from 'echarts';
import dayjs from 'dayjs'
import '../styles/chart.less'

const Chart = (props) => {
  const chartRef = useRef(null)
  const { data } = props

  useEffect(() => {
    if (data) {
      initChart(data)
    }
  }, [data])

  const initChart = (chartData) => {
    const myChart = echarts.init(chartRef.current);
    // 绘制图表
    const lineChartOption = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '4%',
        right: '6%',
        top: '8%',
        bottom: '8%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '净资产',
          type: 'line',
          color: '#AED581',
          symbolSize: 8,
          data: chartData.map(item => item.netAsset)
        },
        {
          name: '总负债',
          type: 'line',
          color: '#FF8A65',
          symbolSize: 8,
          data: chartData.map(item => item.totalLiability * -1)
        },
        {
          name: '总资产',
          type: 'line',
          color: '#4FC3F7',
          symbolSize: 8,
          data: chartData.map(item => item.totalAsset)
        }
      ]
    };

    myChart.setOption(lineChartOption)

    // const rawData = [
    //   [5, 20, 36, 10, 10, 20, 44, 20, 36, 10, 10, 20],
    //   [20, 44, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10],
    //   [10, 10, 20, 44, 5, 20, 36, 20, 36, 10, 10, 20]
    // ];
    // const totalData = [];

    // for (let i = 0; i < rawData[0].length; ++i) {
    //   let sum = 0;
    //   for (let j = 0; j < rawData.length; ++j) {
    //     sum += rawData[j][i];
    //   }
    //   totalData.push(sum);
    // }

    // const barChartOption = {
    //   legend: {
    //     selectedMode: false
    //   },
    //   grid: {
    //     left: 40,
    //     right: 20,
    //     top: 50,
    //     bottom: 50
    //   },
    //   yAxis: {
    //     type: 'value'
    //   },
    //   xAxis: {
    //     type: 'category',
    //     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    //   },
    //   series: [
    //     '净资产',
    //     '总资产',
    //     '总负债'
    //   ].map((name, sid) => {
    //     return {
    //       name,
    //       type: 'bar',
    //       stack: 'total',
    //       barWidth: '60%',
    //       label: {
    //         show: true,
    //         formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
    //       },
    //       data: rawData[sid].map((d, did) =>
    //         totalData[did] <= 0 ? 0 : d / totalData[did]
    //       )
    //     };
    //   })
    // }

    // myChart.setOption(barChartOption)
  }

  if (!data) return null

  return <div ref={chartRef} className="chart"></div>
}

export default Chart;